/**
 * Created by zhangsong on 2019-05-13.
 */
import React, { Component } from 'react';
import { Form, Input, DatePicker, Button } from 'antd';
import moment from 'moment';
import { formatMessage } from '@/utils/i18n';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { datetimeFormat } from '@/constants/styleConfig';
import { searchToMap } from '@/utils/utils';
import VehicleReducer from '@/dva/application/vehicles';
import Style from './index.module.scss';

const { Namespace, Effects } = VehicleReducer;

@connect(
  state => ({
    vehicleStore: state[Namespace],
  }),
  dispatch => ({
    getById: data =>
      dispatch({
        type: `${Namespace}/${Effects.getVehicleById}`,
        data,
      }),
    handleSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.modifyVehicleById}`,
        data,
      }),
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const { search } = props.location;
    const obj = searchToMap(search);
    this.state = {
      id: obj.id,
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById } = this.props;
    getById(id);
  }

  handleReset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  handleSubmit = e => {
    e.preventDefault();
    const { form, handleSubmit, vehicleStore } = this.props;
    const { id } = this.state;
    form.validateFields((err, values) => {
      if (!err) {
        const { expiryDate, ...other } = values;
        handleSubmit({
          body: {
            expiryDate: expiryDate ? expiryDate.format(datetimeFormat.date) : undefined,
            ...other,
          },
          id,
          page: vehicleStore.page,
          pageSize: vehicleStore.pageSize,
          query: vehicleStore.query,
        });
      }
    });
  };

  render() {
    const { form, vehicleStore } = this.props;
    const { getFieldDecorator } = form;
    const { saveLoading, vehicleInfo = {}, detailLoading } = vehicleStore;

    return (
      <PageHeaderWrapper>
        <div className={`${Style.body}`}>
          <div className={Style.excelTitle}>
            <h1>THIRD RUNWAY DIVISION SITE PROCEDURES</h1>
            <h1>APPLICATION FOR VEHICLE ENTRY/PARKING PERMIT</h1>
          </div>
          <Form labelAlign="right" onSubmit={this.handleSubmit}>
            <div className={Style.part}>
              <div className={Style.title}>
                <strong className={`${Style.underLine} ${Style.font16}`}>PART A</strong>
                <i>(TO BE COMPLETED BY THE APPLICANT)</i>
              </div>
              <div>
                <Form.Item label={formatMessage('applicationVehicle.columns.fullName.name')}>
                  {getFieldDecorator('fullName', {
                    initialValue: vehicleInfo.fullName,
                  })(<Input maxLength={50} />)}
                </Form.Item>
              </div>
              <div className={Style.detail}>
                <div className={`${Style.underLine} ${Style.font16}`}>Particulars of Vehicle</div>
                <Form.Item label={formatMessage('applicationVehicle.columns.vehicleNumber.name')}>
                  {getFieldDecorator('vehicleNumber', {
                    initialValue: vehicleInfo.vehicleNumber,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.make.name')}>
                  {getFieldDecorator('make', {
                    initialValue: vehicleInfo.make,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.colour.name')}>
                  {getFieldDecorator('colour', {
                    initialValue: vehicleInfo.colour,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.category.name')}>
                  {getFieldDecorator('category', {
                    initialValue: vehicleInfo.category,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.expiryDate.name')}>
                  {getFieldDecorator('expiryDate', {
                    initialValue: vehicleInfo.expiryDate ? moment(vehicleInfo.expiryDate) : null,
                  })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                </Form.Item>
              </div>

              <div>
                <Form.Item label={formatMessage('applicationVehicle.columns.staffNo.name')}>
                  {getFieldDecorator('staffNo', {
                    initialValue: vehicleInfo.staffNo,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.department.name')}>
                  {getFieldDecorator('department', {
                    initialValue: vehicleInfo.department,
                  })(<Input maxLength={50} />)}
                </Form.Item>
                <Form.Item label={formatMessage('applicationVehicle.columns.telNo.name')}>
                  {getFieldDecorator('telNo', {
                    initialValue: vehicleInfo.telNo,
                  })(<Input maxLength={50} />)}
                </Form.Item>
              </div>
            </div>
            {/* <Form.Item */}
            {/*  label={formatMessage('applicationVehicle.columns.file.name')} */}
            {/*  // extra="表格扫描文件" */}
            {/* > */}
            {/*  {getFieldDecorator('upload', {})( */}
            {/*    <Upload */}
            {/*      name="logo" */}
            {/*      accept="image/*" */}
            {/*      listType="picture" */}
            {/*    > */}
            {/*      <Button> */}
            {/*        <Icon type="upload" /> Click to upload */}
            {/*      </Button> */}
            {/*    </Upload>, */}
            {/*  )} */}
            {/* </Form.Item> */}
            <div className={Style.bottom}>
              <Button htmlType="button" onClick={this.handleReset}>
                {formatMessage('button.reset')}
              </Button>
              <Button type="primary" htmlType="submit" icon="save">
                {formatMessage('button.save')}
              </Button>
            </div>
          </Form>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
